<template>
	<u-popup :show="show" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true" close-icon-color="#ffffff" :maskCloseAble="true" @close="show=false">
		<u-tabs v-if="show" :list="filter.tabs(tabs)" :is-scroll="true" :current="index" @change="i=>index=i" ref="tabs" active-color="#00b280"></u-tabs>
		<view v-if="show" class="fjs h">
			<scroll-view :scroll-y="true" class="ht f1">
				<view class="p6" :class="{'fc-primary':picker[0]===k}" v-for="(v,k) in range[0]" :index="k" :key="k" @click="change(k, 0)">
					{{v}}
				</view>
			</scroll-view>
			<scroll-view :scroll-y="true" class="ht f1" v-if="!['1','2','3','4'].includes(picker[0])">
				<view class="p6" :class="{'fc-primary':picker[1]===k}" v-for="(v,k) in range[1]" :index="k" :key="k" @click="change(k, 1)">
					{{v}}
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
import filter from '@/utils/filter'
import {mapState} from 'pinia'
import {cacheStore} from '@/store'
/**
 *  
 */
export default {
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		// 是否允许通过点击遮罩关闭Picker
		maskCloseAble: {
			type: Boolean,
			default: true
		}
	},
	data () {
		return {
			filter: filter,
			picker: [0, 0],
			index: 0,
			show: false
		}
	},
	computed: {
		...mapState(cacheStore, ['BankCities']),
		range(){
			const range = [{},{}]
			this.BankCities.map(r=>{
				if(r.pid==0){
					range[0][r.id] = r.name
				}
			})
			this.picker[0] > 0 && this.BankCities.map(r=>{
				if(r.pid==this.picker[0]){
					range[1][r.id] = r.name
				}
			})
			return range
		},
		tabs() {
			const tabs = []
			tabs[0] = this.picker[0]>0 ? this.range[0][this.picker[0]] : "请选择"
			if (this.picker[0]>0 && !['1','2','3','4'].includes(this.picker[0])) {
				tabs[1] = this.picker[1]>0 ? this.range[1][this.picker[1]] : "请选择"
			}
			return tabs
		}
	},
	methods: {
		change(i, level) {
			if(this.picker[level] == i){
				return
			}
			this.$set(this.picker, level, i)
			if(level < 1 && parseInt(i) >= 5){
				this.picker.map((r,k)=>{
					k>level && this.$set(this.picker, k, 0)
				})
			} else {
				this.show = false
				this.$emit('update:value', i)
				this.$emit('confirm', i)
			}
		}
	},
	watch: {
		value(newVal){
			if(newVal >= 0){
				if([1,2,3,4].includes(newVal)){
					this.picker = [newVal, 0]
				} else {
					this.picker[0] = this.BankCities.find(r=>r.id==newVal)?.pid
					this.picker[1] = newVal
				}
			}
		}
	}
}
</script>
<style scoped lang="scss">
.h { height: 800rpx; }
</style>
